import React, { useState, useEffect } from 'react'
import { Button, Table, Radio, Breadcrumb, Modal, Input, Tabs, Select, DatePicker, Space, Row, Col } from "antd"
import { Link } from 'react-router-dom'
import { CloudUploadOutlined, PrinterOutlined, SearchOutlined } from '@ant-design/icons';
import style from './index.module.scss'


const { TabPane } = Tabs;
const { Option } = Select
const { RangePicker } = DatePicker;
export default function Moneyreceive() {
    //分页
    const [pageAndSize, setPageAndSize] = useState({
        currentPage: 1,
        pageSize: 10
    })
    const [dataS, setDataS] = useState([])
    const columns = [
        {
            title: '借款编号',
            dataIndex: 'loan_num',
        },
        {
            title: '借款人',
            dataIndex: 'loan_person',
        },
        {
            title: '借款项目',
            dataIndex: 'loan_project',
        },
        {
            title: '期限',
            dataIndex: 'time_limit',
        },
        {
            title: '放款金额(元)',
            dataIndex: 'income_money',
        },
        {
            title: '放款时间',
            dataIndex: 'income_time',
        },
        {
            title: '放款方式',
            dataIndex: 'income_type',
        },
        {
            title: '对账人员',
            dataIndex: 'income_person',
        },
        {
            title: '对账日期',
            dataIndex: 'income_date',
        },
        {
            title: '对账状态',
            dataIndex: 'income_state',
        },
        {
            title: '操作',
            dataIndex: 'action',
            render: (text, record) => {
                if (record.income_state === '未对账') {
                    return <Link to={{ pathname: '/home/cashLoanInfono', record: record }}>查看详情</Link>
                } else if (record.income_state === '已对账') {
                    return <Link to={{ pathname: '/home/cashLoanInfoDone', record: record }}>查看详情</Link>
                } else if (record.income_state === '已冲正') {
                    return <Link to={{ pathname: '/home/cashLoanInfoRight', record: record }}>查看详情</Link>
                } else if (record.income_state === '异常') {
                    return <Link to={{ pathname: '/home/cashLoanInfoError', record: record }}>查看详情</Link>
                }
            }

        },
    ];


    useEffect(() => {
        const data = [
            {
                loan_num: Math.random(),
                loan_person: 'yty',
                loan_project: 'rerer',
                time_limit: '11个月',
                income_money: '5435436',
                income_time: '2018-03-23',
                income_type: '',
                income_person: '7657',
                income_date: '2020-12-09',
                income_state: '未对账'
            },
            {
                loan_num: Math.random(),
                loan_person: 'jg',
                loan_project: 'jgfj',
                time_limit: '12个月',
                income_money: '8678',
                income_time: '2028-03-23',
                income_type: '',
                income_person: 'hfdh',
                income_date: '2024-12-09',
                income_state: '已对账'
            },
            {
                loan_num: Math.random(),
                loan_person: 'kuhj',
                loan_project: 'hyh',
                time_limit: '8个月',
                income_money: '6564',
                income_time: '2012-03-23',
                income_type: '',
                income_person: 'rthy',
                income_date: '2015-12-09',
                income_state: '已冲正'
            },
            {
                loan_num: Math.random(),
                loan_person: 'ytuj',
                loan_project: 'utjrhy',
                time_limit: '3个月',
                income_money: '6576557',
                income_time: '2016-03-23',
                income_type: '',
                income_person: 'yrtgyt',
                income_date: '2017-12-09',
                income_state: '异常'
            }
        ];
        setDataS(data)
    }, [])


    const data1 = [];
    for (let j = 0; j < 4; j++) {
        data1.push({
            zhaiyao_mange: '货款发送',
            money_feedback: "",
        })
    }
    //获取分页
    const getPage = (page, pageSize) => {
        console.log(page, pageSize)
        setPageAndSize({
            currentPage: page,
            pageSize
        })
    }
    const [isModalVisible, setIsModalVisible] = useState(false);


    // 删除弹窗
    const showModal = () => {
        setIsModalVisible(true);
    };

    const handleOk = () => {
        setIsModalVisible(false);
        dataS.splice(0, 1)
    };

    const handleCancel = () => {
        setIsModalVisible(false);
    };




    return (
        <div>
            <Modal title="对账处理" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel} mask maskClosable>
                <Input.TextArea />
                <p>对帐操作，将会对所有选中项执行对帐处理</p>
            </Modal>

            <Breadcrumb style={{ margin: '16px 0', display: "flex", justifyContent: "start" }}>
                <Breadcrumb.Item>首页</Breadcrumb.Item>
                <Breadcrumb.Item>财务管理</Breadcrumb.Item>
                {/* <Breadcrumb.Item>银行账户管理</Breadcrumb.Item> */}
                <Breadcrumb.Item>服务费台账</Breadcrumb.Item>
            </Breadcrumb>
            <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }}>
                <Col className="gutter-row" span={4}>
                    <div>
                        <Input placeholder="借款人" allowClear />
                    </div>
                </Col>
                <Col className="gutter-row" span={4}>
                    <div>
                        <Input placeholder="借款编号" allowClear />
                    </div>
                </Col>
                <Col className="gutter-row" span={2}>
                    <div>
                        <Select
                            allowClear
                            placeholder="对账状态"
                            optionFilterProp="children"

                            filterOption={(input, option) =>
                                option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                            }
                        >
                            <Option value="个人信用">个人信用</Option>
                        </Select>
                    </div>
                </Col>
                <Col className="gutter-row" span={2}>
                    <div>
                        <Select
                            allowClear
                            placeholder="放款方式"
                            optionFilterProp="children"

                            filterOption={(input, option) =>
                                option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                            }
                        >
                            <Option value="个人信用">个人信用</Option>
                        </Select>
                    </div>
                </Col>
                <Col className="gutter-row" span={6}>
                    <div>
                        <Space direction="vertical" size={12}>
                            <RangePicker />
                        </Space>
                    </div>
                </Col>
                <Col className="gutter-row" span={4}>
                    <div>
                        <Button icon={<SearchOutlined />} type='button' >
                            查询
                        </Button>
                    </div>
                </Col>
            </Row>
            <div className={style.pre_title}>
                <p>数据列表</p>
                <div>
                    <Button onClick={showModal}>对账确认</Button>
                    <Radio.Button value="large" > <PrinterOutlined /> 打印</Radio.Button>
                    <Button><CloudUploadOutlined className="icon" />导出</Button>
                </div>
            </div>
            <Table columns={columns} dataSource={dataS} pagination={{
                total: dataS.length,
                defaultPageSize: 5,
                showQuickJumper: true,
                showSizeChanger: true,
                pageSizeOptions: ['10', '20', '30'],
                showTotal: total => `共${Math.ceil(total / pageAndSize.pageSize)}页/ ${total} 条数据`,
                onChange: getPage
            }}
            />
        </div>
    )
}
